<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 选中div中倒数第n个的儿子p元素(按照所有兄弟包括2个span元素) -- 看结构1 */
      /* div > p:nth-last-child(6) {
        color: red;
      } */

      /* 选中div中倒数第n个的儿子p元素(按照所有同类型兄弟) -- 看结构1 */
      /* div > p:nth-last-of-type(6) {
        color: red;
      } */

      /* 选中的是没有兄弟的span元素，也就是说只有唯一的一个span元素 -- 看结构2 */
      /* span:only-child {
        color: red;
      } */

      /* 同类型的span元素，而且是唯一(在父级)。所有测试1，测试2都选中了 */
      /* span:only-of-type {
        color: red;
      } */

      /* root 就是根元素，就是html */
      /* :root {
        background-color: gainsboro;
      } */

      /* 选中的是没有内容的div元素 */
      div:empty {
        width: 20px;
        height: 30px;
        background-color: rebeccapurple;
      }
    </style>
  </head>
  <body>
    <!-- 结构1
    <div>
        <span>测试1</span>
        <p>张三：98分</p>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <p>赵六：68分</p>
        <p>孙七：58分</p>
        <p>老八：48分</p>
        <span>测试2</span>
    </div> -->

    <!-- 结构2 -->
    <!-- <div>
      <span>测试1</span>
    </div>
    <div>
      <span>测试2</span>
      <p>张三：98分</p>
      <p>李四：88分</p>
      <p>王五：78分</p>
      <p>赵六：68分</p>
      <p>孙七：58分</p>
      <p>老八：48分</p>
    </div> -->

    <div></div>
  </body>
</html>
